<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>群申请</title>
  <%@ include file="/WEB-INF/view/common/includ-css.jsp" %>
</head>
<body class="gray-bg">
<div class="row wrapper border-bottom white-bg">
  <div class="col-sm-12">
    <div class="ibox float-e-margins" style="margin-bottom: 0px;">
      <div class="ibox-title">
        <h5>查询条件</h5>
        <div class="ibox-tools">
          <a class="collapse-link">
            <i class="fa fa-chevron-up"></i>
          </a>
        </div>
      </div>
      <div class="ibox-content">
        <form class="form-inline">
          <div class="form-group">
            <label class="font-normal">手机号码：</label>
            <input type="text" id="mobile" name="mobile"/>
          </div>
          <div class="form-group">
            <label class="font-normal">用户id：</label>
            <input type="text" id="uid" name="uid" placeholder="用户id"/>
          </div>
          <input type="hidden" id="statusInput"/>
          <button type="button" class="btn btn-white btn-info btn-round" style="margin-bottom: 0px;" id="query">
            <i class="ace-icon fa fa-search bigger-120 blue"></i>查询
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-sm-4">
    <h2>群管理</h2>
  </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">

        <div class="ibox-content">
          <table id="dataTables" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
              <th>ID</th>
              <th>昵称</th>
              <th>头像</th>
              <th>电话</th>
              <th>用户状态</th>
              <th>申请状态</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<%@ include file="/WEB-INF/view/common/includ-js.jsp" %>
<!-- Data Tables -->
<script src="${path}/static/Hui/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${path}/static/Hui/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${path}/static/plugins/layui/layui.all.js"></script>
<script>
  $(function(){

    // 关闭错误提示
    $.fn.dataTable.ext.errMode = 'none';

    // 数据表格
    var tables = $("#dataTables").dataTable({
      paging:true,
      serverSide: true,
      searching: false,
      ordering:  false,
      processing: false,
      "lengthMenu": [10, 20, 50, 100],
      pageLength: 20,
      lengthChange: true,
      "ajax":{
        url:"/app/user/group/apply/list",
        type:"post",
        data: function (d) {
          d.mobile=$("#mobile").val(),
                  d.id=$("#uid").val()
        }
      },
      columns: [
        { "data": "id" },
        { "data": "nickName" },
        { "data": "avatarUrl" },
        { "data": "phone" },
        { "data": "account_status" },
        { "data": "groupApplyStatus" },
        { "data": "create_time" },
        { "data": "id" },
      ],
      columnDefs: [
        {
          "render": function(data, type, row, meta) {
            var html ='暂无图片';
            if(data!=null && data!=''){
              html = '<img src="'+data+'" style="height: 40px;"/>';
            }
            return html;
          },
          "targets": 2
        },
        {
          "render": function(data, type, row, meta) {
            var html ='正常';
            if(data==1){
              html = '注销';
            }
            if(data==2){
              html = '禁用';
            }
            return html;
          },
          "targets": 4
        },
        {
          "render": function(data, type, row, meta) {
            var html1 ='开起';
            if(data==0){
              html1 = '未开起';
            }
            return html1;
          },
          "targets": 5
        },
        {
          "render": function(data, type, row, meta) {
            if(data!=null && data!=''){
              return data.substring(0,19)
            }
            return "无";
          },
          "targets": 6
        },
        {
          "render": function(data, type, row, meta) {
            var html = '<div class="action-buttons">';
            if(row.groupApplyStatus==1){
              html += '<a href="javascript:void(0)" onclick="updateStatus(' + row.id + ',0)" class="blue" title="关闭群主"><i class="ace-icon fa fa-pencil bigger-130">关闭群主</i></a>';
            }
            if(row.groupApplyStatus==0){
              html += '<a href="javascript:void(0)" onclick="updateStatus(' + row.id + ',1)" class="blue" title="开启群主"><i class="ace-icon fa fa-pencil bigger-130">开启群主</i></a>';
            }
            return html;
          },
          "targets": 7
        }
      ]
    });
    $("#query").click(function(){
      tables.dataTable().fnDraw();
    });

  });

  function updateStatus(id,status){
    var str = status==1?"是否开起群主":"是否关闭群主";
    layer.confirm(str, function (e) {
      var index = layer.load(2);
      $.ajax({
        type:"post",
        url:"${path}/app/user/group/apply/status",
        dataType:"json",
        data:{id:id,status:status},
        success:function(data){
          layer.close(index);
          if(data.code ==0){
            layer.alert(data.msg,{icon:1}, function(){
              location.reload();
            });
          }else{
            layer.alert(data.msg,{icon:2});
          }
        },
        error:function (data) {
          layer.close(index);
        }
      });
    });
  }
</script>
</body>
</html>
